<template>
    <div class="row list-panel">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>客户信息</a></li>
                        <li><a>经销商列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width="80px"
                             size="small">
                        <el-form-item label="小区名称">
                            <el-input v-model="queryForm.storeName" placeholder="小区名称"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="queryForm.realName" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item style="float: right;">
                            <a class="revision-btn" href="javaScript:void(0)" @click="onQuery">搜 索</a>&nbsp;&nbsp;
                        </el-form-item>
                    </el-form>
                    <template v-if="data != null">
                        <el-table
                            ref="multipleTable" class="list-table"
                            :border="true"
                            :data="data.list"
                            tooltip-effect="dark"
                            :header-cell-style="{'background-color': '#F5F5F6'}"
                            max-height="600" align="center"
                            style="width: 100%">
                            <el-table-column type="selection" align="center"
                                             width="55">
                            </el-table-column>
                            <template v-for="columnName in columnNames">


                                <template v-if="columnName.prop === 'promotionStatus'">
                                    <el-table-column align="center"
                                        :label="columnName.label"
                                        :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <i class="el-icon-error" style="color:#F00;"
                                               v-if="scope.row.promotionStatus === 'N'"></i>
                                            <i class="el-icon-success" style="color:#1ab394;"
                                               v-if="scope.row.promotionStatus === 'Y'"></i>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'user.avatarUrl'">
                                    <el-table-column align="center"
                                        :label="columnName.label"
                                        :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <el-popover trigger="hover" placement="top"
                                                        v-if="!$isNullObj(scope.row.user)">
                                                <div style="text-align: center;">
                                                    <img :src="scope.row.user.avatarUrl" class="image"
                                                         style="width: 200px;height:200px">
                                                </div>
                                                <div slot="reference" class="name-wrapper">
                                                    <img :src="scope.row.user.avatarUrl" class="image"
                                                         style="width: 36px;height:36px">
                                                </div>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column align="center"
                                        :label="columnName.label"
                                        :prop="columnName.prop">
                                    </el-table-column>
                                </template>
                            </template>
                        </el-table>
                    </template>
                    <el-pagination style="float: right;margin-top: 10px"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="data.currPage"
                                   :page-size="data.pageSize"
                                   layout="total, prev, pager, next"
                                   :total="data.totalCount">
                    </el-pagination>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'StoreList',
        data() {
            return {
                queryForm: {
                    storeName: '',
                    realName: '',
                    status: '2',
                },
                columnNames: [{
                    label: '头像',
                    prop: 'user.avatarUrl',
                    width: 120
                }, {
                    label: '小区名称',
                    prop: 'storeName',
                    width: 120
                }, {
                    label: '姓名',
                    prop: 'user.realName',
                    width: 120
                }, {
                    label: '手机号',
                    prop: 'user.mobile',
                    width: 120
                }, {
                    label: '详细地址',
                    prop: 'address',
                    width: 120
                }, {
                    label: '备注',
                    prop: 'remark',
                    width: 120
                // }, {
                //     label: '状态',
                //     prop: 'status',
                //     width: 120
                }, {
                    label: '创建日期',
                    prop: 'createTime',
                    width: 120
                }],
                data: {},
                query: {
                    page: ''
                }
            }
        },
        mounted: function () {
            this.listAllStores(this.queryForm);
            // this.listStores(this.queryForm);
        },
        methods: {
            onSubmit() {
            },
            onQuery() {
                this.listAllStores(this.queryForm);
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listAllStores(this.queryForm);
            },
            checkUser(item) {
                this.$prompt("请输入备注", "审批", {
                    confirmButtonText: "同意",
                    cancelButtonText: "拒绝",
                    center: true
                })
                    .then(({
                               value
                           }) => {
                        var put_data = {
                            result: "fail",
                            data: item,
                            remarks: value
                        };
                    })
                    .catch(() => {
                        this.$message({
                            type: "ifno",
                            message: "取消输入..."
                        });
                    });
            },
            async listAllStores(queryForm) {
                let res = await this.$api.get('/mall/store/list', queryForm);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .list-panel .content-wrapper /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        font-weight: normal;
    }
    .list-table {
        font-size: 12px;
    }
</style>
